<template>
	<view class="home-container">
		<view class="self-billing">
			<view class="card-main">
				<view class="card">
					<view class="info-title">
						患者信息
					</view>
					<view class="patient-row">
						<view class="label">就诊人 ：</view>
						<view class="value">{{ orderStat.patName }}</view>
					</view>
					<view class="patient-row">
						<view class="label">医生 ：</view>
						<view class="value">{{ orderStat.doctor }} {{ orderStat.dept }}</view>
					</view>
					<view class="patient-row">
						<text class="label">病历号 ：</text>
						<text class="value">{{ orderStat.preNo }}</text>
					</view>
					<view class="patient-row-end">
						<text class="label"> 诊断结果：</text>
						<text class="value">{{ orderStat.druger }}</text>
					</view>
				</view>
			</view>

			<view class="edit-card">
				<view class="info-title">
					主诉
				</view>
				<view class="">
					<textarea class="input-textarea" v-model="form.cheif_complaint" placeholder="请输入..."
						:maxlength="200" />
					<view class="textarea-count">{{ form.cheif_complaint.length }}/200</view>
				</view>
			</view>
			<view class="edit-card">
				<view class="info-title">
					既往史
				</view>
				<view class="">
					<textarea class="input-textarea" v-model="form.past_disease_history" placeholder="请输入..."
						:maxlength="200" />
					<view class="textarea-count">{{ form.past_disease_history.length }}/200</view>
				</view>
			</view>
			<view class="edit-card">
				<view class="info-title">
					过敏史
				</view>
				<view class="">
					<textarea class="input-textarea" v-model="form.allergy" placeholder="请输入..." :maxlength="200" />
					<view class="textarea-count">{{ form.allergy.length }}/200</view>
				</view>
			</view>
			<view class="edit-card">
				<view class="info-title">
					家族史
				</view>
				<view class="">
					<textarea class="input-textarea" v-model="form.family_history" placeholder="请输入..."
						:maxlength="200" />
					<view class="textarea-count">{{ form.family_history.length }}/200</view>
				</view>
			</view>
			<view class="edit-card">
				<view class="info-title">
					婚育史
				</view>
				<view class="input-container">
					<textarea class="input-textarea" v-model="form.obstetrical_history" placeholder="请输入..."
						:maxlength="200" />
					<view class="textarea-count">{{ form.obstetrical_history.length }}/200</view>
				</view>
			</view>
			<view class="edit-card">
				<view class="info-title">
					病历资料
				</view>
				<view class="">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
				</view>
			</view>


			<view class="card-main">
				<view class="card">
					<view class="info-title">
						药品医嘱
					</view>
					<view class="order order-card" v-for="(order, j) in orderStat.orderList" :key='j'>
						<view class="order-name">
							<view class="value">
								{{order.name}}
							</view>
							<view class="order-amount">
								x {{order.amount}}
							</view>
						</view>
						<view class="order-usage">
							<view class="order-spec">
								规格：{{order.spec}}
							</view>
							<view class="">
								用法：{{order.freq}} | {{order.route}} | {{order.dose}}{{order.doseUnit}}
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="sign-btn">
				签章并发布
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		components: {

		},
		data() {
			return {
				orderStat: {
					preNo: '7883239666',
					patName: "托尔斯泰",
					age: '25',
					sex: 1,
					diag: '上呼吸道感染',
					startTime: '2025-09-07 15:35:17',
					state: '1',
					druger: '系统预审',
					dept: '呼吸科',
					doctor: '张宇',
					orderList: [{
						"name": '阿莫西林分散片',
						spec: '1ml:10盒',
						freq: 'TId',
						dose: '10',
						doseUnit: '片',
						route: '口服',
						"amount": '1'
					}]
				},
				form: {
					cheif_complaint: "",
					past_disease_history: "",
					allergy: "",
					family_history: "",
					obstetrical_history: ""
				}
			}
		},
		computed: {
			...mapGetters([
				'userInfo'
			]),
		},
		methods: {
			toPagePath(path) {
				uni.navigateTo({
					url: path
				})
			},

		}
	}
</script>

<style scoped>
	.home-container {
		 background: linear-gradient(#EAF1FF 0%, #fff 50%);
		min-height: 100vh;
		padding: 32rpx;
	}

	.state-box {
		padding-left: 24rpx;
	}

	.order-state {
		height: 36rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #1D77FF;
		line-height: 36rpx;
		margin-bottom: 24rpx;
	}
	.order-time {
		height: 28rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(29, 119, 255, 0.7);
		line-height: 28rpx;
		margin-bottom: 32rpx;

	}
	.info-title {
		height: 30rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 30rpx;
		position: relative;
		margin-bottom: 32rpx;

	}

	.info-title::after {
		content: '';
		position: absolute;
		bottom: -16rpx;
		left: 0;
		width: 44rpx;
		height: 8rpx;
		background: linear-gradient(90deg, #41CFE6 0%, #14A5FF 100%);
		border-radius: 414rpx;
	}

	.card-main {
		background: linear-gradient(180deg, #EAF1FF 0%, #F6F8FC 20%, #FFFFFF 100%);
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.102);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-bottom: 32rpx;
		padding: 24rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-style: normal;
		text-transform: none;
		text-align: left;
	}

	.edit-card {
		padding: 24rpx;
		margin-bottom: 32rpx;
		background: white;
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.102);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}


	.top-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 38rpx;
	}

	.patient-row {
		display: flex;
		justify-content: space-between;
		padding: 48rpx 0 24rpx 0;
		border-bottom: 2rpx solid #F3F3F3;
	}

	.patient-row-end {
		display: flex;
		justify-content: space-between;
		padding: 48rpx 0 24rpx 0;
	}

	.order-card {
		background-color: #ECF1F9;
		padding: 24rpx;
		border-radius: 10rpx;
	}

	.order-name {
		display: flex;
		justify-content: space-between;
	}

	.order-amount {
		height: 26rpx;
		font-size: 24rpx;
		color: #333333;
		line-height: 26rpx;

	}

	.input-container {
		position: relative;
		margin-top: 34rpx;
	}

	.input-textarea {
		width: 100%;
		min-height: 200rpx;
		background: #f8f8f8;
		border: none;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
	}

	.textarea-count {
		position: absolute;
		bottom: 16rpx;
		right: 16rpx;
		font-size: 24rpx;
		color: #999;
	}

	.label {
		font-size: 30rpx;
		color: #666666;
		width: 6em;

	}

	.value {
		color: #333333;
		font-size: 30rpx;
	}

	.order-usage {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.order-spec {
		margin-top: 16rpx;
		margin-bottom: 16rpx;
	}

	.right-img {
		position: relative;
		right: -28rpx;
		top: -28rpx;
	}

	.state-img {
		width: 124rpx;
		height: 42rpx;
	}

	.sign-btn {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		background-color: #1D77FF;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		height: 80rpx;
		border-radius: 200rpx;
	}
</style>